<template>
  <div>
    <div class="sou">
      搜索分类   
      <template>
        <el-select v-model="searchLevel" @change="getList">
            <el-option
            v-for="item in optionsLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </template>
      <button class="sousuo"><i class="el-icon-search"></i></button>
    </div>
    <div class="t">
      <el-button type="primary" @click="addlevel" size="small"
        >添加赏品等级</el-button
      >
      <el-button type="danger" size="small">批量删除</el-button>
    </div>
    <template>
      <el-table v-loading="loading" :data="goodsType" border style="width: 100%">
        <el-table-column prop="id" label="排序" width="180"> </el-table-column>
        <el-table-column label="玩法模式">
          <template v-slot="scope">
            {{ gametype(scope.row.game_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="赏品等级" width="180">
        </el-table-column>
        <el-table-column prop="address" label="等级图片">
          <template v-slot="scope">
            <div class="img_url">
              <img :src="scope.row.img_url" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="状态">
          <el-button type="primary" size="mini" round>显示</el-button>
          <el-button type="warning" size="mini" round>隐藏</el-button>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row.uuid)" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" @click="del(scope.row.uuid)" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
              :page-sizes="[8, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
    </template>
  </div>
</template>

<script>
import dengji from "../../../api/jurisdiction";
export default {
  data() {
    return {
      goodsType: [],
      searchLevel:null,
      optionsLevel: [
        {
        value: null,
        label: '全部等级'
        },
        {
        value: 1,
        label: '全局赏'
        },
        {
        value: 2,
        label: '一番赏'
        },
        {
        value: 3,
        label: '无限赏'
        },
      ],
      loading: true,
      pagesize: 8,
      pagenum: 1,
      total:0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      console.log(this.searchLevel)
      dengji
        .getgoodlevel({
          page: this.pagenum,
          limit: this.pagesize,
          game_type: this.searchLevel,
        })
        .then((res) => {
          console.log('商品等级',res)
          this.loading = false;
          this.goodsType = res.data.data;
          this.total = res.data.data_count;
        });
    },
    addlevel() {
      this.$router.push({ name: "addgoodslevel" });
    },
    del(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dengji.delgoodlevel({ data: { level_uuid: e } }).then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.$message.success(res.data.msg);
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("删除失败");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(e) {
      this.$router.push({
        name: "addgoodslevel",
        params: {
          id: e,
        },
      });
    },
    gametype(e) {
      if (e == 0) {
        return (e = "无限赏");
      } else if (e == 1) {
        return (e = "全局赏");
      } else if (e == 2) {
        return (e = "一番赏");
      }
    },
    handleSizeChange(val) {
    this.pagesize = val;
    this.getList()
    console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getList()
      console.log(`当前页: ${val}`);
    }
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 250px;
}
.sousuo {
  margin: 6px;
  width: 50px;
  height: 40px;
  background: #009688;
  border: 0;
  color: white;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  cursor: pointer;
}
.el-table {
  margin-top: 10px;
}
.img_url,.img_url img {
  width: 180px;
  height: 40px;
}
.el-pagination{
  text-align: center;
  margin-top:10px;
}
</style>
